<template>
  <div id="program-list">
    <div style="padding:5px">
      <header>
        <div class="inner-left">
        </div>
        <!-- <el-button-group>
          <el-button icon="el-icon-edit"
                     style="padding: 10px 12px;"
                     size="medium">导入</el-button>
          <el-button icon="el-icon-share"
                     style="padding: 10px 12px;"
                     size="medium">导出</el-button>
        </el-button-group> -->
        <!-- <batchTag :number="selections.length"
                  @delete="handleDelete"></batchTag> -->
      </header>
      <main>
        <el-table :data="tableData"
                  header-cell-class-name="table-header"
                  border
                  @selection-change="handleSelectionChange"
                  style="width: 100%">
          <el-table-column type="selection"
                           align="center"
                           width="55">
          </el-table-column>
          <el-table-column type="index"
                           show-overflow-tooltip
                           align="center"
                           label="序号"
                           width="80">
          </el-table-column>
          <el-table-column prop="type"
                           sortable
                           align="center"
                           width="100"
                           label="类型">
            <template slot-scope="scope">
              <div v-if="scope.row.editRow && tabEdit">
                <el-select v-model="addObj.typeCode"
                           filterable
                           allow-create
                           default-first-option
                           style="width:100%;">
                  <el-option v-for="p in programType.type"
                             :key="p.value"
                             :label="p.label"
                             :value="p.value"></el-option>
                </el-select>
              </div>
              <span v-else>{{scope.row.typeCode?programType.formatType(scope.row.typeCode):scope.row.type}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name"
                           show-overflow-tooltip
                           align="center"
                           sortable
                           label="名称">
            <template slot-scope="scope">
              <div v-if="scope.row.editRow && tabEdit">
                <el-input v-model="addObj.name" />
              </div>
              <span v-else>{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="lenth"
                           show-overflow-tooltip
                           align="center"
                           sortable
                           label="时长">
            <template slot-scope="scope">
              <div v-if="scope.row.editRow && tabEdit">
                <el-input v-model="addObj.lenth"
                          maxlength="3"
                          oninput="if(isNaN(parseInt(value)))value=value.slice(0,0)"
                          placeholder="请输入整数分钟">
                  <i slot="suffix"
                     style="line-height:40px">分钟</i>
                </el-input>
              </div>
              <span v-else>{{scope.row.lenth}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="startTime"
                           show-overflow-tooltip
                           width="130"
                           align="center"
                           sortable
                           label="节目起点时间">
            <template slot-scope="scope">
              <div v-if="scope.row.editRow && tabEdit"
                   style="font-size:0">
                <el-input v-model="addObj.min"
                          class="time-input"
                          maxlength="3"
                          oninput="if(isNaN(parseInt(value)))value=value.slice(0,0)"
                          placeholder="整数">
                  <i slot="suffix"
                     style="line-height:40px">分</i>
                </el-input>
                <el-input v-model="addObj.sec"
                          @input="inputSecondListen"
                          class="time-input"
                          maxlength="2"
                          oninput="if(isNaN(parseInt(value)))value=value.slice(0,0)"
                          placeholder="整数">
                  <i slot="suffix"
                     style="line-height:40px">秒</i>
                </el-input>
              </div>
              <span v-else>{{scope.row.startTime?(Math.floor(scope.row.startTime/60)+'分'+scope.row.startTime%60+'秒'):''}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address"
                           show-overflow-tooltip
                           sortable
                           align="center"
                           label="简介">
            <template slot-scope="scope">
              <div v-if="scope.row.editRow && tabEdit">
                <el-input v-model="addObj.introduction" />
              </div>
              <span v-else>{{scope.row.introduction}}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip
                           align="center"
                           label="人员名单">
            <template slot-scope="scope">
              <div v-if="scope.row.editRow && tabEdit">
                <el-input type="textarea"
                          :autosize="{ minRows: 1, maxRows: 3 }"
                          v-model="addObj.extraActor" />
              </div>
              <span v-else>{{scope.row.extraActor}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="date"
                             sortable
                             align="center"
                             width="120"
                             label="演出时间">
            </el-table-column>
            <el-table-column prop="long"
                             sortable
                             align="center"
                             width="100"
                             label="演出时长">
            </el-table-column> -->
          <el-table-column align="center"
                           width="100"
                           label="操作">
            <template slot-scope="scope">
              <span v-if="scope.row.editRow && tabEdit">
                <el-button type="text"
                           size="mini"
                           @click="handleSave">保存</el-button>
                <el-button size="mini"
                           type="text"
                           @click="handleCancel">取消</el-button>
              </span>

              <el-button v-else
                         type="text"
                         @click="handleEdit(scope.row,'节目')">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </main>
      <footer>
        <el-button type="primary"
                   size="small"
                   icon="el-icon-plus"
                   @click="handleAdd">新增</el-button>
        <el-button type="danger"
                   :disabled="selections.length===0"
                   size="small"
                   icon="el-icon-delete"
                   @click="handleDelete">删除</el-button>
      </footer>
    </div>
    <el-dialog title="节目新增/编辑"
               width="450px"
               :visible.sync="visible">
      <el-form label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="addObj.name"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="addObj.typeCode"
                     style="width:100%;">
            <el-option v-for="p in programType.type"
                       :key="p.value"
                       :label="p.label"
                       :value="p.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时长">
          <el-input v-model="addObj.lenth"
                    maxlength="3"
                    oninput="if(isNaN(parseInt(value)))value=value.slice(0,0)"
                    placeholder="请输入整数分钟">
            <i slot="suffix">分钟</i></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input type="textarea"
                    :autosize="{ minRows: 3, maxRows: 5 }"
                    v-model="addObj.des"></el-input>
        </el-form-item>
        <el-form-item label="人员名单">
          <el-input type="textarea"
                    :autosize="{ minRows: 3, maxRows: 5 }"
                    v-model="addObj.des"></el-input>
        </el-form-item>
        <div v-if="(0 === extraArray.length)"
             style="text-align:center">
          <el-button icon="el-icon-plus"
                     @click="addItem" />
        </div>

        <div style="margin-bottom:22px"
             v-for="(item,i) in extraArray"
             :key="item.id">
          <el-input style="width:80px;"
                    v-model="item.name"></el-input>
          <el-input style="width:calc(100% - 200px)"
                    v-model="item.value"></el-input>
          <el-button-group>
            <el-button v-if="(i === extraArray.length-1)"
                       icon="el-icon-plus"
                       @click="addItem"></el-button>
            <el-button icon="el-icon-minus"
                       @click="deleteItem(i)"></el-button>
          </el-button-group>
        </div>
        <el-row style="text-align:right">
          <el-button size="small"
                     type="primary">提交</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import mixin from './mixin/mixin'
import programType from '../../../types/programType'
import API from '../../../api/show'

export default {
  mixins: [mixin],
  props: {
    tableData: {
      type: Array,
      default: () => ([])
    },
    node: {
      default: () => ({}),
      type: Object
    }
  },
  data() {
    return {
      programType: programType,
      addObj: {
        name: '',
        type: '',
        des: '',
        long: '',
        min: null,
        sec: null
      },
      extraArray: [
        {
          id: this.guid(),
          name: '',
          value: ''
        }
      ]
    }
  },
  computed: {
    totalSecond: {
      set(val) {
        this.addObj.sec = val % 60
        this.addObj.min = Math.floor(val / 60)
      },
      get() {
        const min = this.addObj.min ? this.addObj.min * 60 : 0
        const sec = this.addObj.sec || 0
        const starTime = parseInt(min) + parseInt(sec)
        return starTime
      }
    }
  },
  mounted() {
    // this.programType.formatType(6)
  },
  methods: {
    inputSecondListen(event) {
      var number = this.addObj.sec
      if (number >= 60) {
        this.addObj.sec = 59;
      }
    },
    guid() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        const r = Math.random() * 16 | 0
        const v = c === 'x' ? r : (r & 0x3 | 0x8)
        return v.toString(16);
      });
    },
    addItem() {
      const uuid = this.guid()
      this.extraArray.push({ id: uuid, name: '', value: '' })
    },
    deleteItem(i) {
      this.extraArray.splice(i, 1)
    },
    submitProgram() {
      const param = {
        // playId: this.node.nodeId,
        playId: this.$parent.id,
        sectionId: this.node.nodeId,
        ...this.addObj,
        type: programType.formatType(this.addObj.typeCode),
        startTime: this.totalSecond
      }
      // if (this.node.category === 1) {
      //   API.saveProgramByNodeId(param).then(res => {
      //     this.$parent.queryComplexByNodeID({ data: { id: this.node.nodeId } })
      //     this.$parent.queryById()
      //   })
      // } else if (this.node.category === 2) {
      if (param.type === param.typeCode) param.typeCode = null
      API.saveProgramBySectionId(param).then(res => {
        this.$parent.queryProgramByNodeID({ data: { id: this.node.nodeId } })
        this.$parent.queryById()
      })
      // }
    },
    delete() {
      const param = {
        ids: this.selections.map(s => s.id).join(','),
        ...this.node
        // category: 1
      }
      API.deleteProgram(param).then(res => {
        if (this.node.category === 1) {
          this.$parent.queryComplexByNodeID({ data: { id: this.node.nodeId } })
        } else if (this.node.category === 2) {
          this.$parent.queryProgramByNodeID({ data: { id: this.node.nodeId } })
        }
        this.$parent.queryById()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#program-list {
  width: 100%;
  height: 100%;
  @import "./scss/common.scss";
  .time-input {
    width: 50%;
    /deep/ input {
      padding-left: 5px;
    }
  }
}
</style>
